آموزش انیمیشن‌های SwiftUI در iOS 18 - تبدیل کد به حرکت [ویدیو] - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه Introduction

• شروع به کار Getting Started

مبانی Basics

• انیمیشن‌ها با استفاده از withAnimation و Animation Modifier Animations using withAnimation and the Animation Modifier

• متحرک‌سازی همه چیز: آماده‌سازی View Animate Everything - Setting up the View

• متحرک‌سازی همه چیز: افزودن انیمیشن‌ها Animating Everything - Adding the Animations

• مروری بر انواع انیمیشن‌ها Overview of Animation Types

• سایر انیمیشن‌های پیش‌فرض More Default Animations

• انیمیشن‌های Cubic Bezier با استفاده از منحنی‌های زمانی Cubic Bezier Animations using Timing Curves

• انیمیشن‌های Ease سفارشی Custom Ease Animations

• انیمیشن‌های Spring و Interpolating Spring Spring and Interpolating Spring Animations

• نمای اثر دایره‌های هم‌مرکز (ConcentricCirclesEffectView) ConcentricCirclesEffectView

• نمای پس‌زمینه متحرک (AnimatedBackgroundView) AnimatedBackgroundView

• گل چرخان: نمای دایره گرادینت Rotating Flower - Gradient Circle View

• گل چرخان: جفت دایره Rotating Flower - Circle Pair

• نمای گل چرخان Rotating Flower View

تمرین انتخاب‌گر شخص (Person Picker) Person Picker Exercise

• شروع تمرین متحرک انتخاب‌گر شخص Getting Started with the Animated Person Picker Exercise

• دانلود تصاویر از Flaticons Download the Images from Flaticons

• نمای شخص ماسک شده Masked Person View

• پیاده‌سازی نمای انتخاب‌گر شخص Implementation of Person Picker View

کاوشی در فایل‌های SVG و انیمیشن‌ها An Excursion into SVG Files and Animations

• تبدیل SVG به مسیر (Path) SVG to Path

• نمای کلی رسم مسیر Generic Draw Path View

چالش مثلث‌های بنفش چرخان Rotating Purple Triangles Challenge

• مقدمه‌ای بر چالش Introduction to Challenge

• ایجاد مثلث‌ها Creating the Triangles

• بازنویسی (Refactoring) مثلث‌ها Refactoring the Triangles

• نمای مثلث سه گانه Triple Triangle View

• پیاده‌سازی انیمیشن‌ها Implementing the Animations

دینامیک‌های Mesh Gradient و ترکیب بافت‌ها Mesh Gradient Dynamics and Texture Blending

• ایجاد یک Mesh Gradient متحرک Creating an Animated Mesh Gradient

• ترکیب یک بافت (Texture) Blending in a Texture

انیمیشن‌های Callback تکمیل Completion Callback Animations

• آیکون همبرگری: مستطیل جابه‌جا شده Hamburger Icon - Offset Rectangle

• آیکون همبرگری با استفاده از Animation Completions Hamburger Icon using Animation Completions

• دموی تکمیل گرادینت شعاعی - بخش اول Radial Gradient Completion Demo - Part 1

• دموی تکمیل گرادینت شعاعی - بخش دوم: انیمیشن‌ها Radial Gradient Completion Demo - Part 2 - Animations

چالش تکمیل انیمیشن صفحه اسپلش Splash Screen Animation Completion Challenge

• مقدمه‌ای بر چالش صفحه اسپلش Introduction to the Splash Screen Challenge

• آماده‌سازی پروژه و پارامترهای نما Setting up the Project and View Parameters

• لوگو The Logo

• متن The Text

• ایجاد انیمیشن‌ها Creating the Animations

• بهینه‌سازی انیمیشن‌ها Tweaking the Animations

• شخصی‌سازی رنگ‌ها Customizing the Colors

مسیرها و انیمیشن‌ها Paths and Animations

• نمای پک‌من (Pacman) Pacman View

• ستاره‌های زمستانی: درخشش و آماده‌سازی پس‌زمینه Winter Stars - The Glow and Setting up the Background

• ستاره‌های زمستانی: تنظیم آفست y ستاره‌ها Winter Stars - Setting the Star y-Offset

• ستاره‌های زمستانی: چرخش و تولید ستاره‌ها Winter Stars - Rotate and Spawn Stars

• ستاره‌های زمستانی: حذف ستاره‌ها Winter Stars - Removing Stars

• ستاره‌های زمستانی: ایجاد شکل ستاره Winter Stars - Creating the Star Shape

• بیایید یک حباب گفتگو بسازیم! Let's Create a Speech Bubble!

• پیاده‌سازی حباب گفتگو Implementing the Speech Bubble

بررسی ترنزیشن‌ها در SwiftUI با AnyTransition Exploring Transitions in SwiftUI with AnyTransition

• مقدمه‌ای بر ترنزیشن‌ها Introduction to Transitions

• گروه افشای لغزنده سفارشی (Disclosure Group) Custom Sliding Disclosure Group

چالش‌های انیمیشن Animation Challenges

• چالش انیمیشن "اشتباه بزرگ" "Big Mistake" Animation Challenge

• اشتباه بزرگ: انتخاب رویکرد Big Mistake - Choosing an Approach

• اشتباه بزرگ: تکمیل راه‌حل Big Mistake - Completing the Solution

جان بخشیدن به ماسک‌ها با تایمرها Bringing Masks to Life with Timers

• مقدمه Introduction

• ایجاد متن رنگی Creating the Colorful Text

• ایجاد متن ماسک شده Creating the Masked Text

• ماسک و فازهای ماسک The Mask and Mask Phases

• افزودن تایمر و انیمیشن‌ها Adding the Timer and Animations

• متحرک‌سازی رنگ پس‌زمینه Animating the Background Color

• شخصی‌سازی دموی ماسکینگ Customizing the Masking Demo

فاز انیمیتورها (Phase Animators) Phase Animators

• شروع کار با Phase Animators: مربع قرمز و آبی Getting Started with Phase Animators: The Red and Blue Square

• توالی‌های CGPoints و Phase Animators Sequences of CGPoints and Phase Animators

• انیمیشن‌های فاز پیچیده Complex Phase Animations

• شکل خط چپ Left Line Shape

• Modifier سفارشی متن Custom Text Modifier

• انیمیشن فاز پیچیده: متحرک‌سازی همه چیز Complex Phase Animation - Animating Everything

• انیمیشن فاز پیچیده: OffsetX Complex Phase Animation - OffsetX

• انیمیشن فاز پیچیده: تکمیل انیمیشن Complex Phase Animation - Completing the Animation

• انیمیشن‌های Key Frame Key Frame Animations

شکل Blob The Blob

• مقدمه‌ای بر صفحه اسپلش Blob Introduction to Blob Splash Screen

• ایجاد Blob Creating the Blob

• نمای SplashScreenView SplashScreenView

• ایجاد انیمیشن‌ها با استفاده از Phase Animator Creating Animations using Phase Animator

• ایجاد نمای اصلی Creating the Main View

پیاده‌سازی طراحی انیمیشن لوگوی صفحه اسپلش با Phase Animators Implementing a Splash Screen Logo Animation Design using Phase Animators

• معرفی چالش Presenting the Challenge

• ایجاد مدل فاز لوگو Creating the Logo Phase Model

• دانلود و تست آیکون برگ Downloading and Testing the Leaf Icon

• نمای فازهای لوگو - بخش اول Logo Phases View - Part 1

• نمای فازهای لوگو - بخش دوم Logo Phases View - Part 2

• نمای متن درصد The Percentage Text View

• تعریف Enum مدل فازهای لوگو Defining the Enum Logo Model Phases

• نمای MainLogoView با استفاده از Phase Animator The MainLogoView using Phase Animator

• پیاده‌سازی انیمیشن‌های فاز Implementing the Phase Animations

انیمیشن‌ها با استفاده از SpriteKit و ساطع‌کننده‌های ذرات Animations using SpriteKit and Particle Emitters

• مقدمه‌ای بر بررسی انیمیشن‌ها با SpriteKit و ساطع‌کننده‌های ذرات Introduction to Exploring Animations with SpriteKit and Particle Emitters

• متن با شکل پس‌زمینه Text with Background Shape

• ایجاد ساطع‌کننده ذرات (Particle Emitter) Creating the Particle Emitter

• نمای متن Sprite متحرک Animated Sprite Text View

• اسپرایت‌های چپ و راست Left and Right Sprites

• ایجاد انیمیشن‌ها Creating the Animations

انیمیشن‌های Metal Metal Animations

• امضای شیدر و قطعه کدهای کاربردی Shader Signature and Useful Snippets

• پارامترهای سفارشی Custom Parameters

• استفاده از Timeline و یافتن مرکز Using the Timeline and Finding One's Center

• شیدر خیره‌کننده Amazing Shader

• تنظیم پارامترهای شیدر Setting up the Shader Parameters

• پیاده‌سازی شیدر الهام‌بخش Implementing the Inspirational Shader